<template>
	<div id="main">
		<el-container>
			<!-- header -->
			<el-header>
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
				 background-color="#23262E" text-color="#fff" active-text-color="#ffd04b">
					<el-menu-item index="1" @click="toUrl('message')">首页</el-menu-item>
					<el-menu-item index="2">下单系统</el-menu-item>
					<!-- <el-menu-item index="3">超管系统</el-menu-item> -->
					<ul class="header-ul clearfix">
						<li>
							<el-menu-item index="4">
								<i class="iconfont icon-qianbao"></i>
								<span>余额:80.2</span>
							</el-menu-item>
						</li>
						<li>
							<el-menu-item index="5" @click="toUrl('recharge')">
								<i class="iconfont icon-qianbao"></i>
								<span>在线充值</span>
							</el-menu-item>
						</li>
						<li>
							<el-menu-item index="6">
								<el-dropdown>
									<span class="el-dropdown-link">
										<i class="iconfont icon-yonghu"></i>
										<span>韩测试</span>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item><span @click="toUrl('my_order')">我的订单</span></el-dropdown-item>
										<el-dropdown-item><span @click="toUrl('user_manage')">用户管理</span></el-dropdown-item>
										<el-dropdown-item><span @click="toUrl('order_manage')">下单管理</span></el-dropdown-item>
										<el-dropdown-item><span @click="toUrl('user_setting')">个人设置</span></el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>

							</el-menu-item>
						</li>
					</ul>
				</el-menu>
			</el-header>
			<el-container>
				<div class="sile-nav">
					<el-aside width="200px">
						<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#393D49" text-color="#fff"
						 active-text-color="#ffd04b">
							<!-- 微信业务 -->
							<el-submenu index="1">
								<template slot="title">
									<i class="iconfont icon-wechat"></i>
									<span>微信业务</span>
								</template>
								<el-menu-item-group>
									<el-menu-item  :index="(1+''+index+'')" @click="toUrl('pay')"  v-for="(item,index) in WechatBusiness" >{{item.title}}</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							<!-- QQ业务 -->
							<el-submenu index="2">
								<template slot="title">
									<i class="iconfont icon-icon"></i>
									<span>QQ业务</span>
								</template>
								<el-menu-item-group>
									<el-menu-item  :index="(2+''+index+'')" @click="toUrl('pay')"  v-for="(item,index) in QQBusiness" >{{item.title}}</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							<!-- 抖音业务 -->
							<el-submenu index="3">
								<template slot="title">
									<i class="iconfont icon-yinle"></i>
									<span>抖音业务</span>
								</template>
								<el-menu-item-group>
									<el-menu-item  :index="(3+''+index+'')" @click="toUrl('pay')"  v-for="(item,index) in MusicBusiness" >{{item.title}}</el-menu-item>
								</el-menu-item-group>
							</el-submenu>

						</el-menu>
					</el-aside>
				</div>

				<el-main>
					<div class="announcement">公告</div>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
	const appRequest = require('../util/request.js').default
	const api = require('../util/api.js').default
	const app = require('../util/app.js').default
	export default {
		data() {
			return {
				activeIndex: '1',
				WechatBusiness: [{
						'title': "公众号文章阅读"
					},
					{
						'title': "公众号文章在看"
					},
					{
						'title': "公众号关注"
					},
					{
						'title': "公众号文章转发"
					},
					{
						'title': "发朋友圈广告"
					},
					{
						'title': "个人号加粉"
					},
					{
						'title': "40人小群"
					},
					{
						'title': "微信营销号出租"
					},
				], //微信业务
				QQBusiness: [], //QQ业务
				MusicBusiness: [], //抖音业务
			}
		},
		methods: {
			// 页面跳转
			toUrl(name, param) {
				this.$router.push({
					path: name,
					query: param,
				})
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		},
		mounted() {
			// 设置/获取全局变量(vuex)
			// app.getGlobal('');
			// app.setGlobal('',XXXXX);
		}
	}
</script>
<style scoped lang="scss">
	#main {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch; //解决ios滚动卡顿

		.el-header {
			padding: 0;
		}

		.header-ul {
			position: absolute;
			right: 0;

			li {
				float: left;

				i {
					font-size: 22px;
					margin-right: 10px;
				}

				span {
					color: white;
				}
			}
		}

		.sile-nav {
			height: 100vh;
			background: #393D49;

			i {
				margin-right: 10px;
			}
		}
		.announcement{
			width: 100%;
			background: #f2f2f2;
			margin-bottom: 20px;
			padding: 10px;
		}
	}
</style>vh
